<template>
  <div class="data-detail-dialog-page">
    <el-dialog
      :model-value="props.dialogVisible"
      title="数据详情"
      width="1200px"
      :close-on-click-modal="false"
      :before-close="handleClose">
      <el-row class="detail-block" :gutter="16">
        <el-col class="info-item" :span="8" v-for="(item, index) in infoData" :key="index">
          <span class="label">{{item.label}}:</span>
          <span class="value">11</span>
        </el-col>
      </el-row>

      <div class="search-block">
        <el-form ref="searchParamsRef" :model="searchParams" @submit.prevent="search">
          <el-row :gutter="16">
            <el-col :span="8">
              <el-form-item label="日期：" prop="date">
                <el-date-picker
                  v-model="searchParams.date"
                  type="date"
                  style="width: 100%;"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="total-data">
        <el-row :gutter="16">
          <el-col :span="10">
            <div class="user-block">
              <div :class="['user-item', 'pd16', currentUser.data.id === item.id ? 'active' : null]" v-for="(item, index) in userData" :key="index" @click="handleClick(item)">
                <div class="title">
                  <span>
                    <span>{{item.name}}</span>
                    <span class="status">
                      <el-tag :type="filterStatus(item).type" effect="dark" size="small">{{filterStatus(item).text}}</el-tag>
                    </span>
                  </span>
                  <span class="date">10月25日 12:20:00 至 12:30:33</span>
                </div>
                <div v-if="item.status === 1 || item.status === 0">
                  <div class="info-one">
                    <div class="info-item" v-for="(sitem, sindex) in statusOptionsOne" :key="sindex">
                      <div class="value-block">
                        <span class="value">{{item[sitem.prop]}}</span>
                        <span class="unit">{{sitem.unit}}</span>
                      </div>
                      <div class="label">{{sitem.label}}</div>
                    </div>
                  </div>
                  <div class="info-two mt16">
                    <div class="two-item">
                      <span>心跳</span>
                      <span>
                        <span>最高</span><span>89</span>
                      </span>
                      <span>
                        <span>最低</span><span>89</span>
                      </span>
                      <span>
                        <span>平均</span><span>89</span>
                      </span>
                      <span>呼吸</span>
                      <span>
                        <span>最高</span><span>89</span>
                      </span>
                      <span>
                        <span>最低</span><span>89</span>
                      </span>
                      <span>
                        <span>平均</span><span>89</span>
                      </span>
                    </div>
                    <!-- <div class="two-item">
                      <span>呼吸</span>
                      <span>
                        <span>最高</span><span>89</span>
                      </span>
                      <span>
                        <span>最低</span><span>89</span>
                      </span>
                      <span>
                        <span>平均</span><span>89</span>
                      </span>
                    </div> -->
                  </div>
                </div>
                <div v-else>
                  <div class="info-one">
                    <div class="info-item" v-for="(sitem, sindex) in statusOptionsTwo" :key="sindex">
                      <div class="value-block">
                        <span class="value">{{item[sitem.prop]}}</span>
                        <span class="unit">{{sitem.unit}}</span>
                      </div>
                      <div class="label">{{sitem.label}}</div>
                    </div>
                  </div>
                  <div class="info-two mt16">
                    <div class="two-item">
                      <span>
                        <span>浅睡</span><span>89</span>
                      </span>
                      <span>
                        <span>深睡</span><span>89</span>
                      </span>
                      <span>
                        <span>清醒</span><span>89</span>
                      </span>
                      <span>
                        <span>REM睡眠</span><span>89</span>
                      </span>
                      <span>
                        <span>平均心率</span><span>89</span>
                      </span>
                      <span>
                        <span>平均呼吸</span><span>89</span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="14">
            <div class="data-block">
              <el-table :data="tableData" class="nr-table">
              <el-table-column label="用户" prop="name"></el-table-column>
              <el-table-column label="时长" prop="rtsp"></el-table-column>
              <el-table-column label="开始" prop="rtsp"></el-table-column>
              <el-table-column label="结束" prop="rtsp"></el-table-column>
              <el-table-column label="状态" prop="rtsp"></el-table-column>
              <el-table-column label="平均心率" prop="rtsp"></el-table-column>
              <el-table-column label="最大心率" prop="rtsp"></el-table-column>
              <el-table-column label="平均呼吸" prop="rtsp"></el-table-column>
              <el-table-column label="最大呼吸" prop="rtsp"></el-table-column>
              <el-table-column label="异常次数" prop="rtsp"></el-table-column>
              <el-table-column label="操作" prop="rtsp" fixed="right">
                <template #default="scope">
                  <el-link class="table-btn" type="primary" :underline="false" @click="handleData(scope.row)">数据</el-link>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="nr-page"
              v-model:current-page="searchParams.currentPage"
              v-model:page-size="searchParams.pageSize"
              :page-sizes="[10, 20, 30, 40]"
              background
              layout="total, prev, pager, next, sizes, jumper"
              :total="searchParams.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
            </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>

    <data-collect-dialog
      :dialogVisible="dataCollectDialogVis"
      :formData="collectData.data"
      @update:dialogVisible="(value: boolean) => dataCollectDialogVis = value">
    </data-collect-dialog>
  </div>
</template>

<script setup lang="ts" name="DataDetailDialog">
import { ref, reactive, watch, ComponentInternalInstance, getCurrentInstance, onMounted, nextTick } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
import DataCollectDialog from './data-collect-dialog.vue'

const { proxy } = getCurrentInstance() as ComponentInternalInstance

const emit = defineEmits(['update:dialogVisible'])
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  formData: {
    type: Object,
    default: {}
  }
})

const infoData = ref<any>([
  { label: '设备名称', prop: '' },
  { label: '设备ID', prop: '' },
  { label: '设备分组', prop: '' },
  { label: '安装地址', prop: '' },
  { label: '安装房间', prop: '' }
])
const searchParamsRef = ref<FormInstance>()
const searchParams = reactive({
  name: '',
  date: '',
  currentPage: 1,
  pageSize: 10,
  total: 0
})
const tableData = ref<any>([
  { id: 1, name: '11' }
])
const userData = ref<any>([
  { id: 1, name: '用户C', status: 1, peace: 85 },
  { id: 2, name: '用户C', status: 2, peace: '07:35' },
  { id: 3, name: '用户C', status: 0 }
])
const statusOptionsOne = [
  { label: '平静稳定', prop: 'peace', unit: '分钟' },
  { label: '活跃活动', prop: '', unit: '分钟' },
  { label: '异常波动', prop: '', unit: '次' },
  { label: '睡眠时长', prop: '', unit: '分钟' }
]
const heartbeatAndBreatheOptions = [
  { label: '最高', prop: '' },
  { label: '最低', prop: '' },
  { label: '平均', prop: '' },
  { label: '最高', prop: '' },
  { label: '最高', prop: '' },
  { label: '最高', prop: '' }
]
const statusOptionsTwo = [
  { label: '睡眠时长', prop: 'peace', unit: '' },
  { label: '翻身次数', prop: '', unit: '' },
  { label: '离床次数', prop: '', unit: '' },
  { label: '离床时长', prop: '', unit: '' }
]
const currentUser = ref({
  data: {
    id: 1
  }
})
const dataCollectDialogVis = ref(false)
const collectData = ref({
  data: {}
})

// 过滤状态
const filterStatus = (row: any) => {
  let obj = {
    text: '已脱离',
    type: 'info'
  }
  if (row.status === 1) {
    obj.type = 'success'
    obj.text = '监测中'
  } else if (row.status === 2) {
    obj.text = '已起床'
  }
  return obj
}

// 查询
const search = () => {

}

// 重置
const reset = () => {
  searchParamsRef.value?.resetFields()
}

// 分页跳转
const handleCurrentChange = (val: number) => {

}
const handleSizeChange = (val: number) => {

}

// 点击用户
const handleClick = (row: any) => {
  currentUser.value.data = Object.assign({}, row)
}

// 数据
const handleData = (row: any) => {
  dataCollectDialogVis.value = true
  collectData.value.data = Object.assign({}, row)
}

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

// 关闭弹窗
const handleClose = () => {
  resetForm(searchParamsRef.value)
  // tableData.value = []
  proxy?.$emit('update:dialogVisible', false)
}
</script>

<style lang="stylus" scoped>
@import '../../style/base.styl'

.data-detail-dialog-page
  .detail-block
    .info-item
      margin-bottom 16px
      .label
        width 100px
        display inline-block
        text-align right
        color black
        font-weight bold
      .value
        margin-left 4px
  .total-data
    .user-block
      .user-item
        border 1px solid #ddd
        margin-bottom 16px
        cursor pointer
        transition all .2s linear
        &:last-child
          margin-bottom 0px
        &:hover
          border 1px solid rgb(170, 210, 255)
          background rgb(238, 246, 255)
        &.active
          border 1px solid rgb(170, 210, 255)
          background rgb(238, 246, 255)
        .title
          display flex
          justify-content space-between
          align-items center
          .status
            margin-left 16px
            vertical-align top
          .date
            font-size 12px
        .info-one
          display flex
          width 100%
          .info-item
            text-align center
            flex 1
            .value-block
              font-weight bold
              margin-top 16px
              .value
                font-size 20px
              .unit
                margin-left 4px
            .label
              margin-top 4px
        .info-two
          display flex
          justify-content space-between
          span
            margin 2px
          .two-item
            display flex
            flex 1
            text-align center
            justify-content center
</style>
